<template>
  <div class="main">
        <div class="header" >
            <div class="left" @click="Return">
                <i class="iconfont icon-zuojiantou"></i>
            </div>
            <div class="in">领券购买，自买可省钱...</div>
            <div class="rigth"></div>
        </div>
        <div class="main_box">
            <div v-if="isshow"  class="zhegai"></div>
            <div class="thetop">
                  <img v-lazy="this.$route.query.url" class="">
                  <div class="thebot">
                      <span>{{this.$route.query.name}}</span>
                  <span class="fr share_btn" @click="fenxiang">我要分享</span>
                  </div>
            </div>  
          <ul class="mui-table-view">
            <div class="clear"></div>
            <div v-if="isshow" class="tankuang">
                <div @click="btn(3)" class="guanbi"></div>
                <div v-if="hide" class="tishi">
                    <p>复制成功了哟~</p>
                </div>                     
                <div class="tantop">
                    我要分享
                </div>
                
                <div class="tanb">
                    <p>【双人团】一次推广，双份佣金，详情请见多多进宝官网。<br> 【单人团】无需拼单，领券后直接购买</p>
                </div>
                <div class="tuan">
                    <span @click="btn(1)"> <img src="/static/img/dan.png" alt=""> 单人团</span>
                    <textarea cols="32" rows="4" id="copyObj" v-model="address">领券地址：</textarea> <a class="add"  @click="fuzhi()" href="javascript:void(0);">一键复制</a>                    
                    <span @click="btn(2)"><img src="/static/img/shuang.png" alt=""> 双人团</span>
                    <textarea cols="32" rows="4" id="copyObj1" v-model="address">领券地址：</textarea><a class="add"  @click="fuzhi1()" href="javascript:void(0);">一键复制</a>
                </div>
                <!-- <div class="add"  @click="fuzhi()">
                    <a href="javascript:void(0);">一键复制</a>
                </div> -->
            </div>
            <li  class="mui-table-view-cell mui-media" v-for="(todo) in newsDetail" :key="todo.index"   @click="open(todo.g_num_iid,todo.g_title,todo.g_zhuansheng,todo.g_img_thumb,todo.g_coupon_end_time,todo.g_coupon_start_time)" >
              <div class="list">
                <div class="image">
                  <img v-lazy="todo.g_img_thumb" class="sb_pic fl">
                </div>                 
                    <div class="sb_r fr"> 
                        <h5>{{todo.g_title}}</h5>

                        <div class="sb_b">
                            <div class="fl">
                                <p class='mui-ellipsis'>        
                                <span class="price">￥{{todo.g_quanhou/100}}</span>      
                                <span class="price_under">￥{{todo.g_min_group_price/100}}</span>        
                                </p>  
                            <div class="quan">
                                <img class="quan_pic fl" src="/static/img/bg_ticket.png">
                                <span class="quan_price">￥{{todo.g_coupon_discount/100}}</span>
                            </div>
                            <p>已拼{{todo.g_sold}}单</p>
                            </div>
                            <div class="share  fr">
                                <img class="share_pic" src="/static/img/share.png">
                                <p>分享赚￥{{todo.g_zhuansheng}}</p>
                            </div>       
                        </div>    
                    </div>    
                </div>  
              <div class="clear"></div>            
            </li>
          </ul>
        </div>
      </div>
</template>

<script>
import axios from "axios";
import {
  Toast,
  MessageBox,
  Navbar,
  TabItem,
  TabContainer,
  TabContainerItem
} from "mint-ui";
import DetailHeader from './component/NewsHeader'
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "zhuantiDetail",
  data() {
    return {
      newsDetail: [],
      tuiguang:{},
      index:1,
      hide:false,
      address: "",
      isshow:false
    }
  },
  components: {
    DetailHeader
  },
  computed: {
    ...mapGetters(["this.$store.state.article"])
  },
   mounted() {
    var id =this.$route.query.id;  
  },
  methods: {
     Return() {
        this.$router.go(-1)
     },
      fuzhi: function(id,value) {
        var _this=this
        let url = document.querySelector('#copyObj');
        url.select(); // 选择对象
        document.execCommand("Copy");
        _this.hide=true;
        setTimeout(() => { 
            _this.hide=false;
            _this.isshow=false;
        }, 1000)
    },
    fuzhi1: function(id,value) {
        var _this=this
        let url = document.querySelector('#copyObj1');
        url.select(); // 选择对象
        document.execCommand("Copy");
        _this.hide=true;
        setTimeout(() => { 
            _this.hide=false;
            _this.isshow=false;
        }, 1000)
    },
     btn:function(num){
         this.index=num
         
         if(num==1){
             this.address="主题名称："+this.$route.query.name+"\n"+ "领券地址："+this.tuiguang.short_url
         }else if(num==3){
             this.isshow=false
         }
         else{
             this.address="主题名称："+this.$route.query.name+"\n"+ "领券地址："+this.tuiguang.multi_group_short_url
         }
     },
     fenxiang:function(){
         var _this=this 
         _this.isshow=true    
        axios.get(
            "/api/common/goodspdd/themelink",
            {
                params: {
                    theme_id:this.$route.query.id
                    }
            }
        ).then(function(res){
            console.log(res.data.theme_promotion_url_generate_response.url_list[0])
            _this.tuiguang=res.data.theme_promotion_url_generate_response.url_list[0]
            _this.address="主题名称"+_this.$route.query.name+"\n"+ "领券地址："+_this.tuiguang.short_url
        })
     },
      open: function(id,title,num,img,end,start) {
      this.$router.push({ 
          path: "goodDetail", 
          query: {
               num_iid: id,
               title:title,
               num:num,
               img:img,
               end:end,
               start:start
                } });
    }, 
  },
  created() {
    var _this = this;
    var id = this.$route.query.id;
    axios.get(
          "/api/common/goodspdd/themegoods",
          {
              params: {
                  theme_id:id
                  }
          }
      ).then(function(res) {
          _this.newsDetail=res.data.data;
    });
  }
};
</script>
<style lang="stylus" scoped>
textarea{
    background-color inherit
    word-break break-all
    line-height .5rem
    color #777
    margin-left .2rem
}

.guanbi{
    background url("/static/img/special_close.png")
    position absolute
    width .7rem
    height .7rem
    background-size contain
    right .45rem
    top .2rem
}
.zhegai{
    width 100%
    // height 100%
    background-color rgba(0,0,0,.5)
    z-index 2
    height 100rem
    position fixed
}
.active{
    background-color #000
    color #fff
}
.tankuang{
    width 8.9rem
    height 8rem
    background-color #fff
    position fixed
    left .65rem
    top 4rem
    z-index 2
    border-radius: 8px 8px 0 0;
}
.tantop{
    height 1rem
    line-height 1rem
    padding-left .38rem
    color #fff
    font-size .4rem
    background-image: linear-gradient(-51deg, #FE7D60 0%, #FB525B 100%);
    border-radius: 8px 8px 0 0;
}
.tanb{
    padding .15rem .01rem
    line-height .55rem
    width 95%
    margin .2rem auto
    background-color #FFF5F0
    
}
.tanb p{
    color: #FE3952;
    font-size .3rem
}
.tankuang .tishi{
    width 2.8rem
    height 1.5rem
    background-color rgba(0,0,0,0.7)
    font-size .3rem
    line-height 1.5rem
    border-radius .13rem
    position fixed
    bottom 43%
    left 38%
    color #fff
    text-align center
}
.tishi p{
    color #fff
}
.add{
    width 1.8rem
    height .76rem
    background-color #ff4040
    text-align center
    font-size .32rem
    line-height .85rem
    display inline-block
    margin-right  .5rem
    float right 
    color #fff
    border-radius .4rem
}
.add a{
    color #fff
    font-size .4rem
}
.tuan{
    background-color #fff
    
    // height 1rem
    // border-top 1px #ccc solid
    // border-bottom 1px #ccc solid
}
.tuan span{
    display inline-block
    width 49%
    height 100%
    line-height 1rem
    font-size .4rem
    padding-left .2rem
}
.tuan img{
    width .5rem
}
.header
        width 100%
        height 1.1rem
        z-index 1
        position fixed
        background #ff4040
        color #fff
        font-size 0.35rem
        .in
            width 60%
            height 100%
            line-height 1.1rem
            float left
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            text-align start
            
        .left
            width 10%; 
            height 100%
            float left
            i 
                font-size: 0.4rem;
                line-height: 1.1rem;
                text-align: center;
                display: block;
        .rigth
            width 10%; 
            height 100%
            float left
.main_box {
    padding-top 1rem
}
.thetop{
    height 5.7rem
    box-shadow 1px 1px 7px rgba(0,0,0,.2)
    padding-top 0
}
.thebot{
    line-height .8rem
    padding 0 .15rem
}
.share_btn{
    display inline-block
    background-color #ff4040
    font-size 12px
    padding 1px 5px
    color #fff
    margin-top .2rem
    line-height .5rem
    border-radius .1rem
}
.thetop img{
    width 100%
}
.clear{
  clear: both;
}
.tuijian{
  float: left;
  width :50%;
}
p{
  font-size .35rem;
  color :#000;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.main_box li{
  margin-top: 5px;
  overflow hidden;
}
.mui-table-view {
		li {
			h1 {
				font-size: 14px;
			}
			.mui-ellipsis {
				font-size: 12px;
				color: #226aff;
				display: flex;
				justify-content: space-between;
			}
		}
	}
 .sb_r{
        margin-right: .2rem;
        width 70%;
    }
    .share{
        width 27%
        text-align center
    }
    .share_pic{
    width 1rem
    height 1rem
    margin-bottom .2rem
    }
    .quan_pic{
        width: 1.8rem;
        height: .8rem;
        margin-right: 10px;
        margin-bottom: 5px;
    }
    .sb_pic{
        width: 25%
        height 25%
        margin-right: .2rem;
    }
    span{
        font-size: .3rem;
        color: #000;
    }
    .quan{
        position: relative;
        margin-top: .18rem;
    }
    .quan_price{
        position: absolute;
        top: .2rem;
        z-index: 0;
        left: .9rem;
    }
    .price_under{
        text-decoration: line-through;
        color: #999;
        font-size: .2rem;
    }
    h5{
    width :200px;
    overflow: hidden;
    text-overflow :ellipsis;
    white-space: nowrap;
        font-size: .32rem;
        color: #000;
    }
    .main h2 {
    display: block;
    height: 1.3rem;
    background: white;
    font-size: 0.35rem;
    line-height: 1.3rem;
    padding-left: 0.3rem;
    }

</style>